import React, { useRef, useEffect } from 'react';
import { ProTable, ProColumns, ActionType } from '@ant-design/pro-components';
import { Tag, Button, Popconfirm, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';

import CreateMenuForm from './CreateMenuForm';
import { handleTree, translationIcon, selectToDict } from '@/app/common/utils';
import { useAppDispatch } from '@/app/common/hooks';
import { getMenuTree } from '@/app/stores/features/userStore';

export type DataSourceType = {
  menuId?: number;
  menuName?: string;
  icon?: string;
  orderNum?: number;
  menuType?: string;
  perms?: string;
  component?: string;
  createTime?: string;
  status?: string;
  children?: DataSourceType[];
};

const columns: ProColumns<DataSourceType>[] = [
  {
    title: '菜单名称',
    dataIndex: 'menuName',
  },
  {
    title: '菜单id',
    dataIndex: 'menuId',
    search: false,
    editable: false,
  },
  {
    title: '图标',
    dataIndex: 'icon',
    search: false,
    valueType: 'select',
    valueEnum: {
      ...selectToDict(translationIcon()),
    },
  },
  {
    title: '序号',
    dataIndex: 'orderNum',
    search: false,
  },
  {
    title: '菜单类型',
    dataIndex: 'menuType',
    search: false,
    valueType: 'select',
    valueEnum: {
      F: {
        text: <Tag color="orange">按钮</Tag>,
        status: '',
      },
      M: {
        text: <Tag color="cyan">目录</Tag>,
        status: '',
      },
      C: {
        text: <Tag color="purple">菜单</Tag>,
        status: '',
      },
    },
  },
  {
    title: '权限标识',
    dataIndex: 'perms',
    search: false,
  },
  {
    title: '组件路径',
    dataIndex: 'component',
    search: false,
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      '1': {
        text: '停用',
        status: 'Error',
      },
      '0': {
        text: '正常',
        status: 'Success',
      },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    editable: false,
    search: false,
  },
  {
    title: '操作',
    valueType: 'option',
    search: false,
    width: 200,
    render: (_text, _record, _, _action) => {
      return [
        <CreateMenuForm
          key="edit-menu"
          actionRef={_action}
          title="编辑"
          isEdit
          menuId={_record.menuId}
        />,
        <Popconfirm
          title={`确定删除菜单 [${_record.menuName}]?`}
          key="delete"
          onConfirm={async () => {
            const res = await $delete(`/system/menu/${_record.menuId}`);
            if (res.code === 200) {
              message.success(`删除 [${_record.menuName}] 成功`);
              _action.reload();
            }
          }}
        >
          <Button type="link" danger icon={<DeleteOutlined />}>
            删除
          </Button>
        </Popconfirm>,
      ];
    },
  },
];

/**
 * 菜单管理页面
 * @date 2022/9/7 - 15:11:57
 *
 * @export
 * @returns {*}
 */
export default function SysMenu() {
  const actionRef = useRef<ActionType>();
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getMenuTree());
  }, []);

  return (
    <ProTable<DataSourceType>
      key="sys-menu"
      actionRef={actionRef}
      dateFormatter="string"
      rowKey="menuId"
      headerTitle="菜单管理"
      columns={columns}
      request={async params => {
        const res = await $get('/system/menu/list', params);

        return {
          data: handleTree(res.data, 'menuId'),
          success: true,
        };
      }}
      search={{
        labelWidth: 'auto',
      }}
      options={{
        setting: {
          listsHeight: 800,
        },
      }}
      pagination={{
        pageSize: 30,
      }}
      editable={{
        type: 'multiple',
      }}
      toolBarRender={action => {
        return [<CreateMenuForm key="create-menu" actionRef={action} title="新建菜单" />];
      }}
    />
  );
}
